<template>
    <div class="main">
        <div class="filter-container">
            <!--<el-input @keyup.enter.native="search" class="filter-item" placeholder="按名称搜索" v-model="params.name"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>-->
            <el-button v-if="rightsButtons['add']" type="success" icon="el-icon-plus" class="filter-item fr" @click="showAdd">新建</el-button>
        </div>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="标题" prop="title"></el-table-column>
            <el-table-column align="center" label="logo">
                <template slot-scope="scope">
                    <img :src="scope.row.logo" style="height: 50px;" alt="">
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型" width="100">
                <template slot-scope="scope">
                    <span v-text="types[scope.row.type-1]"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="跳转">
                <template slot-scope="scope">
                    <span v-if="scope.row.goodsName">{{scope.row.goodsName}}</span>
                    <span v-if="scope.row.type===4">{{scope.row.jumpId}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序" prop="sort"  width="100"></el-table-column>
            <el-table-column align="center" label="是否启用" width="120">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status"
                            @change="updateStatus(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="是"
                            inactive-text="否"
                            :active-value="1"
                            :inactive-value="0"
                            :disabled="!rightsButtons['operate']">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" v-if="total > 0">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex" :page-size="listQuery.pageSize" :total="total" layout="total, prev, pager, next, jumper"></el-pagination>
        </div>
        <el-dialog :title="editItem.id ? '编辑碧选精品' : '新建碧选精品'" :visible.sync="showEditPop">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                <el-form-item label="标题:" prop="title">
                    <el-input v-model="editItem.title"></el-input>
                </el-form-item>
                <el-form-item label="logo:" prop="logo">
                    <el-upload
                            class="avatar-uploader"
                            accept="image/*"
                            :action="upladUrl"
                            name="file"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :before-upload="beforeUpload">
                        <img v-if="editItem.logo" :src="editItem.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类型:" prop="type">
                    <el-radio v-for="(item, index) in types" v-model="editItem.type" :label="index+1" :key="index+1" @change="chooseType">{{item}}</el-radio>
                </el-form-item>
                <el-form-item :label="`跳转${types[editItem.type-1]}:`" prop="jumpId" :rules="commonRules.ignoreInvite">
                    <el-input v-if="editItem.type === 4" v-model="editItem.jumpId"></el-input>
                    <template v-else>
                        <span v-text="jumpCheck.name"></span>
                        <el-button type="primary" plain @click="chooseJump">请选择</el-button>
                    </template>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="editItem.sort" type="number"></el-input>
                </el-form-item>
                <el-form-item label="简介:">
                    <el-input type="textarea" v-model="editItem.introduction"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-switch
                            v-model="editItem.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
  export default {
    name: 'activityQuality',
    data() {
      return {
        types: ['专题', '套餐', '商品', 'h5链接'],
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
          isPage: 1
        },
        list: [],
        total: 0,
        listLoading: false,
        editItem: {
          title: '',
          logo: '',
          type: 1,
          jumpId: '',
          sort: '',
          introduction: '',
          status: 0
        },
        jumpCheck: {},
        editRule: {
          title: [
            {required: true, message: '不能为空', trigger: 'change'},
            {max: 100, message: '不能超过100字符', trigger: 'change'},
          ],
          logo: [
            {required: true, message: '请上传', trigger: 'change'},
          ],
          jumpId: [
            {required: true, message: '请选择', trigger: 'change'}
          ],
        },
        showEditPop: false,
        btnDisabled: false,
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList(){
        this.listLoading = true;
        this.request({
          url: '/bsnl-activity/boutique/list',
          method: 'get',
          params: this.listQuery
        }).then(({data, totalCount}) => {
          this.list = data;
          this.total = totalCount;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
      },
      showAdd(){
        this.editItem = {
          title: '',
          logo: '',
          type: 1,
          jumpId: '',
          sort: '',
          introduction: '',
          status: 0
        };
        this.jumpCheck = {};
        this.showEditPop = true;
        this.btnDisabled = false;
      },
      showEdit(item) {
        this.editItem = Object.assign({}, item);
        if(this.editItem.type === 2){
          this.jumpCheck = {
            packageId: item.jumpId,
            name: item.goodsName
          };
        }
        else{
          this.jumpCheck = {
            id: item.jumpId,
            name: item.goodsName
          };
        }
        this.showEditPop = true;
        this.btnDisabled = false;
      },
      // 启用/禁用
      updateStatus(item) {
        this.request({
          url: '/bsnl-activity/boutique/update',
          method: 'post',
          data: item
        }).then(() => {
          this.$message.success(item.status === 1 ? '启用成功' : '禁用成功');
        }).catch(err => {
          this.$message.error(err);
        });
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageIndex = page;
        this.getList();
      },
      uploadSuccess(res) {
        this.editItem.logo = this.replaceImgUrl(res.filePath);
      },
      chooseType() {
        this.jumpCheck = {};
        this.editItem.jumpId = '';
      },
      chooseJump() {
        if(this.editItem.type === 1){
          this.checkSpecial([this.jumpCheck], 1).then(val => {
            this.jumpCheck = val[0];
            this.editItem.jumpId = this.jumpCheck.id;
          });
          return false;
        }
        if(this.editItem.type === 2){
          this.checkPackage([this.jumpCheck], 1).then(val => {
            this.jumpCheck = val[0];
            this.editItem.jumpId = this.jumpCheck.packageId;
          });
          return false;
        }
        if(this.editItem.type === 3){
          this.checkGoods([this.jumpCheck], 1).then(val => {
            this.jumpCheck = val[0];
            this.editItem.jumpId = this.jumpCheck.id;
          });
          return false;
        }
      },
      save(){
        this.$refs.editItem.validate(valid => {
          if (!valid) {
            return false;
          }
          let url = this.editItem.id ? '/bsnl-activity/boutique/update' : '/bsnl-activity/boutique/create';
          this.btnDisabled = true;
          this.request({
            url,
            method: 'post',
            data: this.editItem
          }).then(() => {
            this.btnDisabled = false;
            this.editItem = {};
            this.showEditPop = false;
            this.$message.success('保存成功');
            this.getList();
          }).catch(err => {
            this.btnDisabled = false;
          });
        });
      },
    }
  }
</script>
